import React, { useState } from "react";
import FilterTabs, { Tab } from "./FilterTabs";
import FilterBar, { FilterGroup } from "./FilterBar";
import "./StylePage.css";

const tabs: Tab[] = [
  { key: "all", label: "全部" },
  { key: "template", label: "设计模板", icon: <span role="img" aria-label="palette">🎨</span> },
  { key: "video", label: "视频 | 实拍", icon: <span role="img" aria-label="video">🎬</span> },
  { key: "audio", label: "配乐音效", icon: <span role="img" aria-label="audio">🎵</span> },
  { key: "image", label: "摄影 | 配图", icon: <span role="img" aria-label="image">📷</span> },
  { key: "ppt", label: "PPT | 办公", icon: <span role="img" aria-label="ppt">📁</span> },
  { key: "decoration", label: "装饰装修", icon: <span role="img" aria-label="decoration">🛠️</span> },
  { key: "font", label: "字体", icon: <span style={{ fontFamily: 'serif' }}>F</span> },
];

const filterConfig: Record<string, FilterGroup[]> = {
  template: [
    {
      key: "category",
      label: "分类",
      type: "single",
      options: [
        { label: "全部", value: "all" },
        { label: "广告设计", value: "ad" },
        { label: "元素", value: "element" },
        { label: "背景", value: "bg" },
        { label: "UI设计", value: "ui" },
        { label: "3D素材", value: "3d" },
        { label: "电商淘宝", value: "taobao" },
        { label: "新媒体配图", value: "media" },
      ],
    },
    {
      key: "format",
      label: "格式",
      type: "multi",
      options: [
        { label: "全部", value: "all" },
        { label: "PSD", value: "psd" },
        { label: "AI", value: "ai" },
        { label: "JPG", value: "jpg" },
        { label: "PNG", value: "png" },
        { label: "CDR", value: "cdr" },
        { label: "EPS", value: "eps" },
        { label: "C4D", value: "c4d" },
        { label: "SKETCH", value: "sketch" },
        { label: "INDD", value: "indd" },
        { label: "3DMAX", value: "3dmax" },
      ],
    },
    {
      key: "color",
      label: "颜色筛选",
      type: "single",
      options: [
        { label: "全部", value: "all" },
        { label: "自定义", value: "custom" },
      ],
    },
  ],
  // 其他一级标签同理配置
  all: [
    {
      key: "scene",
      label: "场景",
      type: "single",
      options: [
        { label: "全部", value: "all" },
        { label: "办公", value: "office" },
        { label: "教育", value: "edu" },
        { label: "生活", value: "life" },
      ],
    },
  ],
  // ...
};

const StylePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState("template");
  const [filterValue, setFilterValue] = useState<Record<string, string | string[]>>({});

  const filterGroups = filterConfig[activeTab] || [];

  return (
    <div className="stylepage-root">
      <FilterTabs tabs={tabs} activeKey={activeTab} onChange={key => {
        setActiveTab(key);
        setFilterValue({});
      }} />
      <FilterBar groups={filterGroups} value={filterValue} onChange={setFilterValue} />
      {/* 这里可以放内容区 */}
    </div>
  );
};

export default StylePage;